
const form = layui.form
let $image = $(".container img");
//==================编辑========
//利用查询字符串得到点击的id，然后用字符串变数组的方法得到id
let id = location.search.split('?id=')[1]

axios.get('/my/article/'+id)
.then(({data:{data}}) => {
  console.log(data)
  editor.txt.html(data.content)
  $image
  .cropper('destroy')      // 销毁旧的裁剪区域
  .attr('src', `http://api-breakingnews-web.itheima.net${data.cover_img}`)  // 重新设置图片路径
  .cropper(options)   
  form.val('formPub',data)
})
//下拉列表
axios.get('/my/article/cates')
  .then(({ data: { data } }) => {
    console.log(data)
    const cateArr = data.map(function ({ Id, name }) {
      return `<option value="${Id}">${name}</option>`
    }).join('')
    $('[name="cate_id"]').append(cateArr)
    form.render('select')
  })
  //富文本
// const E = window.wangEditor
const editor = new wangEditor("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 500;
editor.create()
//文章封面


// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 400/280,
  preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);


$('#btnChooseCoverImage').on('click', function () {
  $('#fileCover').click()
})
$('#fileCover').on('change', function () {
  const file = this.files[0]
  // console.log(file);
  if (!file) {
    return layer.msg('请上传文件')
  }
  const newSrc = URL.createObjectURL(file)
  // console.log(newSrc);
  $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newSrc)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
})
let state 
$('#btnPublish').on('click',function (e) {
  // 3. 获取到用户选择的文件列表
  state = '已发布'
})
$('#btnSave').on('click', function (e) {
  // 3. 获取到用户选择的文件列表
 state  = '草稿'
})


  $('.layui-form').on('submit',function(e){
    e.preventDefault()
  $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob( (blob)=> {
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
      // console.log(this);
      // console.log(blob);
   
      const fd = new FormData(this)
      fd.append('content',editor.txt.html())
      fd.append('cover_img',blob)
      fd.append('state',state)
      fd.append('Id',id)
      axios.post('/my/article/edit',fd)
        .then(res => {
          if(res.data.status!==0){
            return layer.msg(res.data.message)
            }
            layer.msg(res.data.message,{time:1000},function(){
                window.parent.getClick()
            })
        })

    })
})




